<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <div class="algorithmParameter">
    <div class="query_div">
      <el-form inline size="small" class="form_class" label-width="100">
        <el-form-item label="算法名:">
          <el-select
            clearable
            v-model="queryParams.analysisType"
            filterable
            remote
            reserve-keyword
            placeholder="请输入算子名"
            :remote-method="remoteMethod"
            :loading="selectLoading"
          >
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="path:">
          <el-input v-model="queryParams.path" clearable/>
        </el-form-item>
        <el-form-item label="label:">
          <el-input v-model="queryParams.label" clearable/>
        </el-form-item>
        <el-form-item label="field_id:">
          <el-input v-model="queryParams.fieldId" clearable/>
        </el-form-item>
        <el-form-item style="margin-left: 100px">
          <el-button type="primary" size="small" @click="buttonClick('query')">查询</el-button>
          <el-button size="small" @click="buttonClick('reset')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="btn_div">
      <el-button size="small" type="primary" :disabled="readOnly" @click="buttonClick('add')">
        <el-icon class="el-icon--left"><Plus /></el-icon>添加算法参数
      </el-button>
    </div>
    <div class="table_div" v-loading="loading">
      <el-table :data="tableData" border>
        <el-table-column show-overflow-tooltip v-for="item in columns" :key="item.label" :label="item.label" align="center" :prop="item.prop" />
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scope">
            <el-tooltip content="修改" placement="top">
              <el-button size="small" link type="primary" icon="EditPen" @click="buttonClick('edit', scope.row)">修改</el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button size="small" link type="primary" icon="Delete" @click="buttonClick('delete', scope.row)">删除</el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagenation">
        <el-pagination
          size="small"
          layout="prev, pager, next,jumper"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          :total="total"
        />
      </div>
    </div>
    <AddAlgorithmParameter v-if="addAlgorithmParameterVisible" :addAlgorithmParameterVisible="addAlgorithmParameterVisible" :rowData="currentData" @handleEvent="handleEvent" />
  </div>
</template>
        
    <script name="OperatorParameter" setup>
import { getAlgorithmPrameterList, deleteAlgorithmParameter,getAlgorithmList } from '@/api/parameterLibrary';
import AddAlgorithmParameter from './AddAlgorithmParameter.vue';

const tableData = ref([]);
const currentData = ref(null);
const columns = [
  { label: '算法名', prop: 'analysisType' },
  { label: '算子名', prop: 'operatorName' },
  { label: 'field_id', prop: 'fieldId' },
  { label: 'label', prop: 'label' },
  { label: 'path', prop: 'path' }
];
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  path: '',
  label: '',
  fieldId: '',
  analysisType: ''
});
const total = ref(0);
const addAlgorithmParameterVisible = ref(false);
const options = ref([]);
const selectLoading = ref(false);
const loading = ref(false);

//加载算子下拉选项
const remoteMethod = (query) => {
  if (query) {
    selectLoading.value = true;
    const params = {
      pageNum: 1,
      pageSize: 10,
      analysisType: query,
      isAsc: 'descending'
    };
    setTimeout(() => {
      getAlgorithmList(params)
        .then((res) => {
          if (res?.rows) {
            options.value = res?.rows.map((el) => {
              return { label: el.analysisType, value: el.analysisType };
            });
          }
        })
        .finally(() => {
          selectLoading.value = false;
        });
    }, 200);
  } else {
    options.value = [];
  }
};
const buttonClick = (type, data) => {
  if (type === 'add') {
    currentData.value = null;
    addAlgorithmParameterVisible.value = true;
  }
  if (type === 'query') {
    queryByCondition();
  }
  if (type === 'reset') {
    queryParams.value = {
      pageNum: 1,
      pageSize: 10,
      path: '',
      label: '',
      fieldId: '',
      algorithmName: ''
    };
    queryByCondition();
  }
  if (type === 'edit') {
    currentData.value = data;
    addAlgorithmParameterVisible.value = true;
  }
  if (type === 'delete') {
    doDelete(data);
  }
};
// 删除
const doDelete = (data) => {
  ElMessageBox.confirm('是否确认删除该数据项？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteAlgorithmParameter(data._id).then((res) => {
      if (res) {
        ElMessage({ showClose: true, message: '删除成功', type: 'success' });
        queryByCondition();
      }
    });
  });
};
const handleEvent = (data) => {
  addAlgorithmParameterVisible.value = false;
  if (data.type === 'refresh') {
    queryByCondition();
  }
};
// 查询数据
const queryByCondition = () => {
  tableData.value = [];
  loading.value = true;
  getAlgorithmPrameterList(queryParams.value).then((res) => {
    if (res?.rows) {
      tableData.value = res?.rows || [];
    }
  }).finally(()=>{
    loading.value = false;
  });
};
onMounted(() => {
  queryByCondition();
});
</script>
<style scoped lang="scss">
.algorithmParameter {
  height: calc(100vh - 155px);
  overflow: auto;
  width: 100%;
  .form_class {
    border: 1px solid #dddddd7a;
    padding: 10px;
    // margin-top: 10px;
    margin-bottom: 10px;
  }
  .btn_div {
    margin-bottom: 10px;
  }
  .table_div {
    .pagenation {
      display: flex;
      justify-content: end;
      margin-top: 10px;
    }
  }
}

:deep(.el-cascader) {
  width: 100%;
}
</style>
